<p-toolbar styleClass="p-2">
  <div>
    <button pButton
      class="mr-2 p-button-sm"
      (click)="onSaveJson()">Save</button>
    <button pButton
      class="mr-2 p-button-sm"
      (click)="onLoadJson()">Load</button>

    <button pButton
      class="mr-2 p-button-sm"
      (click)="onGetAlgoGraph()">getAlgoGraph</button>
    <button pButton
      class="mr-2 p-button-sm"
      (click)="onLoadAlgoGraph()">loadAlgoGraph</button>
    <button pButton
      class="mr-2 p-button-sm"
      (click)="onExecute()">Execute</button>
  </div>
</p-toolbar>
<div class="flex flex-1 flex-row gap-2"
  id="dag-container">
  <div #dndContainer
    class="border-round w-12rem bg-surface font-bold flex  flex-wrap flex-row align-content-start  gap-2 p-3 overflow-hidden relative">
  </div>
  <div class="flex-1"
    class="graph-container"
    #graphContainer></div>
</div>

<algo-unit-setting-sidebar #settingSidebar
  (hide)="onHideSettingSidebar($event)"></algo-unit-setting-sidebar>